// 判断是不是移动设备
export const isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function () {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

/*
* 渲染转盘
* */
export function drawWheelCanvas(turnWheel, imgSorry) {
    // 获取canvas画板，相当于layer？？
    var canvas = document.getElementById("wheelCanvas");
    //    var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换
    // 计算每块占的角度，弧度制
    var baseAngle = Math.PI * 2 / (turnWheel.awardsList.length);
    // 获取上下文
    var ctx = canvas.getContext("2d");

    var canvasW = canvas.width; // 画板的高度
    var canvasH = canvas.height; // 画板的宽度
    //在给定矩形内清空一个矩形
    ctx.clearRect(0, 0, canvasW, canvasH);

    //strokeStyle 绘制颜色
    ctx.strokeStyle = "#FFBE04"; // 红色
    //font 画布上文本内容的当前字体属性
    ctx.font = '16px Microsoft YaHei';

    // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
    // 画具体内容
    for (var index = 0; index < turnWheel.awardsList.length; index++) {
        var award = turnWheel.awardsList[index];
        // 当前的角度
        var angle = turnWheel.startAngle + index * baseAngle;
        // 填充颜色
        if (award.money) {
            ctx.fillStyle = '#FFF4D6'
        } else {
            ctx.fillStyle = '#FFFFFF'
        }

        // 开始画内容
        // ---------基本的背景颜色----------
        ctx.beginPath();
        /*
        * 画圆弧，和IOS的Quartz2D类似
        * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
        * x :圆的中心点x
        * y :圆的中心点x
        * sAngle,eAngle :起始角度、结束角度
        * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针
        * */
        ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
        ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
        ctx.stroke();
        ctx.fill();
        //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），
        ctx.save();

        /*----绘制奖品内容----重点----*/
        // 红色字体
        ctx.fillStyle = "#E5302F";
        var line_height = 17;
        // translate方法重新映射画布上的 (0,0) 位置
        // context.translate(x,y);
        // 见PPT图片，
        var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
        var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
        ctx.translate(translateX, translateY);

        // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！
        // angle，当前扇形自身旋转的角度 +  baseAngle / 2 中心线多旋转的角度  + 垂直的角度90°
        ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
        // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
        // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
        /** 
        * context.fillText(text, x, y, maxWidth);
        * 注意！！！y是文字的最底部的值，并不是top的值！！！
        */

        // if (award.title.indexOf("M") > 0) { //查询是否包含字段 流量包
        //     var awardsList = award.title.split("M");
        //     for (var j = 0; j < awardsList.length; j++) {
        //         ctx.font = (j == 0) ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
        //         if (j == 0) {
        //             ctx.fillText(awardsList[j] + "M", -ctx.measureText(awardsList[j] + "M").width / 2, j * line_height);
        //         } else {
        //             ctx.fillText(awardsList[j], -ctx.measureText(awardsList[j]).width / 2, j * line_height);
        //         }
        //     }
        // } else if (award.title.indexOf("M") == -1 && award.title.length > 6) { //奖品名称长度超过一定范围
        //     award.title = award.title.substring(0, 6) + "||" + award.title.substring(6);
        //     var awardsList = award.title.split("||");
        //     for (var j = 0; j < awardsList.length; j++) {
        //         ctx.fillText(awardsList[j], -ctx.measureText(awardsList[j]).width / 2, j * line_height);
        //     }
        // } else {
        //在画布上绘制填色的文本。文本的默认颜色是黑色
        ctx.fillText(award.title, -ctx.measureText(award.title).width / 2, 0);
        // }

        //添加对应图标
        if (award.title.indexOf("谢谢参与") >= 0) {
            imgSorry.onload = function () {
                ctx.drawImage(imgSorry, -15, 10);
            };
            ctx.drawImage(imgSorry, -15, 10);
        }
        if (award.money) {
            ctx.fillText(award.money+'元', -ctx.measureText(award.money+'元').width / 2, 30,50);
        }
        //还原画板的状态到上一个save()状态之前
        ctx.restore();

        /*----绘制奖品结束----*/

    }
}
